<template>
  <Form label-width="100px"
        :options="options"
        @on-preview="handlePreview"
        @on-remove="handleRemove"
        @before-remove="beforeRemove"
  >
    <template #uploadArea>
      <el-button size="small" type="primary">Upload</el-button>
    </template>
    <template #action="scope">
      <el-button type="primary" @click="submit(scope)">提交</el-button>
      <el-button type="primary" @click="reset(scope)">重置</el-button>
    </template>
  </Form>
</template>

<script lang="ts" setup>

import {FormOptions} from "../../components/form/src/types";
import {ElMessage, FormInstance} from "element-plus";

interface Scope {
  form: FormInstance,
  model: any
}

let options: FormOptions[] = [
  {
    type: 'input',
    value: '',
    prop: 'username',
    label: '用户名',
    rules: [
      {
        required: true,
        message: '用户名不能为空',
        trigger: 'blur'
      },
      {
        min: 2,
        max: 6,
        message: '用户名在2-6位之间'
      }
    ],
    attrs: {
      clearable: true
    }
  },
  {
    type: 'input',
    value: '',
    prop: 'password',
    label: '密码',
    rules: [
      {
        required: true,
        message: '密码不能为空',
        trigger: 'blur'
      },
      {
        min: 6,
        max: 15,
        message: '密码在6-15位之间'
      }
    ],
    attrs: {
      showPassword: true,
      clearable: true,
    }
  },
  {
    type: 'select',
    value: '',
    label: '角色',
    placeholder: '请选择角色',
    prop: 'role',
    rules: [
      {
        required: true,
        message: '角色不能为空',
        trigger: 'blur'
      }
    ],
    children: [
      {
        type: 'option',
        label: '经理',
        value: '1'
      },
      {
        type: 'option',
        label: '主管',
        value: '2'
      },
      {
        type: 'option',
        label: '职工',
        value: '3'
      }
    ]
  },
  {
    type: 'checkbox-group',
    value: [],
    prop: 'like',
    label: '爱好',
    children: [
      {
        type: 'checkbox',
        label: '足球',
        value: '1'
      },
      {
        type: 'checkbox',
        label: '篮球',
        value: '2'
      },
      {
        type: 'checkbox',
        label: '羽毛球',
        value: '3'
      }
    ]
  },
  {
    type: 'radio-group',
    value: '',
    prop: 'gender',
    label: '性别',
    children: [
      {
        type: 'radio',
        label: '男',
        value: '1'
      },
      {
        type: 'radio',
        label: '女',
        value: '2'
      }
    ]
  },
  {
    type: 'upload',
    label: '上传',
    prop: 'upload',
    rules: [
      {
        required: true,
        message: '上传文件不能为空',
        trigger: 'blur'
      }
    ],
    attrs: {
      tip: 'jpg/png files with a size less than 500KB.'
    },
    uploadAttrs: {
      action: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15'
    }
  },
  {
    type: 'editor',
    prop: 'editor',
    value: '',
    label: '描述'
  }
]

let handlePreview = (file: any) => {
  console.log(file)
}
let handleRemove = (fileObj: any) => {
  console.log(fileObj)
}
let beforeRemove = (fileObj: any) => {
  console.log(fileObj)
}

let submit = (scope: Scope) => {
  scope.form.validate((valid) => {
    if(valid) {
      console.log(scope.model )
    } else {
      ElMessage.error('表单验证失败')
    }
  })
}

let reset = (scope: Scope) => {
  scope.form.resetFields()
}
</script>

<style scoped>

</style>